<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="../../static/plugins/layui/css/layui.css" />
		<link rel="stylesheet" href="../../static/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/plugins/jqgrid/ui.jqgrid-bootstrap.css">
		<link rel="stylesheet" href="../../static/plugins/ztree/css/metroStyle/metroStyle.css">
		<link rel="stylesheet" href="../../static/css/main.css">
		<script src="../../static/libs/jquery.min.js"></script>
		<script src="../../static/plugins/layer/layer.js"></script>
		<script src="../../static/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/libs/bootstrap.min.js"></script>
		<script src="../../static/libs/vue.min.js"></script>
		<script src="../../static/plugins/jqgrid/grid.locale-cn.js"></script>
		<script src="../../static/plugins/jqgrid/jquery.jqGrid.min.js"></script>
		<script src="../../static/plugins/ztree/jquery.ztree.all.min.js"></script>
		<script src="../../static/js/common.js"></script>
		<style type="text/css">
			.form-inline .form-group {
				display: inline-block;
				margin-bottom: 10px;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<div id="rrapp" v-cloak class="layui-tab layui-tab-card" lay-filter="test">
			<ul class="layui-tab-title">
				<li class="layui-this">基本情况</li>
				<li>家庭情况</li>
				<li>享受政策</li>
				<li>期望诉求</li>
			</ul>
			<div class="layui-tab-content">
				<!--基本情况-->
				<div class="layui-tab-item layui-show">
					<div class="row">
						<!--左边-->
						<div class="col-md-3" style="text-align: center;">
							<img src="../../static/image/head.png" id="upload_img" width="80%" height="80%">
						</div>
						<div class="col-md-1">
							<!--间隔-->
						</div>
						<!--中间-->
						<div class="col-md-4">
							<form class="form-inline">
								<div class="form-group">
									<label>组别</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personGroup" placeholder="组别" />
								</div>
								<div class="form-group">
									<label>姓名</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personName" placeholder="姓名" />
								</div>
								<div class="form-group">
									<label>性别</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personSex" placeholder="性别" />
								</div>
								<div class="form-group">
									<label>年龄</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personAge" placeholder="年龄" />
								</div>
								<div class="form-group">
									<label>身份证号码</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personIdcard" placeholder="身份证号码" />
								</div>
								<div class="form-group">
									<label>家庭人数</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personFamilyNums" placeholder="家庭人数" />
								</div>
								<div class="form-group">
									<label>户主</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personFamilyHeader" placeholder="户主" />
								</div>
								<div class="form-group">
									<label>家庭关系</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personFamilyRelation" placeholder="家庭关系" />
								</div>
								<div class="form-group">
									<label>政治面貌</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personPolitical" placeholder="政治面貌" />
								</div>
								<div class="form-group">
									<label>婚姻状况</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personMarry" placeholder="婚姻状况" />
								</div>
								<div class="form-group">
									<label>民族</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personNational" placeholder="民族" />
								</div>
								<div class="form-group">
									<label>文化程度</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personEducation" placeholder="文化程度" />
								</div>

							</form>
						</div>
						<!--右边-->
						<div class="col-md-4">
							<form class="form-inline">
								<div class="form-group">
									<label>在校生状况</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personAtschool" placeholder="在校生状况" />
								</div>
								<div class="form-group">
									<label>健康状况</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personHealth" placeholder="健康状况" />
								</div>
								<div class="form-group">
									<label>劳动能力</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personLabor" placeholder="劳动能力" />
								</div>
								<div class="form-group">
									<label>务工状况</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personWorkSituation" placeholder="务工状况" />
								</div>

								<div class="form-group">
									<label>人均年收入</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personIncomeYear" placeholder="人均年收入" />
								</div>
								<div class="form-group">
									<label>联系电话</label>
									<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personMobile" placeholder="联系电话" />
								</div>

							</form>
						</div>
					</div>
				</div>
				<!--家庭情况-->
				<div class="layui-tab-item" style="text-align: center;">
					<div id="echart_div"></div>
				</div>
				<!--享受政策-->
				<div class="layui-tab-item">
					<div class="form-group">
						<input type="text" readonly class="form-control" v-model="wisArchivesPerson.personFamilySituation" placeholder="家庭属性" />
					</div>
				</div>
				<!--期望诉求-->
				<div class="layui-tab-item">建设中，敬请期待！</div>
			</div>
		</div>

		<script src="../../static/js/modules/wisarchivesperson.js"></script>

		<script src="../../static/js/HwUtil.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			//初始化数据
			vm.getInfo(HwUtil.getQueryString("pid"));
		</script>
		<!--选项卡-->
		<script>
			layui.use('element', function() {
				var $ = layui.jquery,
					element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

				//卡片切换监听
				element.on('tab(test)', function(data) {
					//					console.log(this.innerText); //当前Tab标题所在的原始DOM元素
					//					console.log(data.index); //得到当前Tab的所在下标
					if(data.index == 1)
						family("'" + vm.wisArchivesPerson.personFamilyHeader + "'");
					//console.log(data.elem);得到当前的Tab大容器
				});

			});
		</script>
		<!--echart-->
		<script src="../../static/plugins/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//加载家庭关系
			function family() {
				var url = 'wisarchivesperson/family';
				$.ajax({
					type: "POST",
					url: baseURL + url,
					contentType: "application/json",
					data: JSON.stringify(vm.wisArchivesPerson),
					success: function(r) {
						if(r.code === 0) {
							var echart_data = [],
								echart_link = [];
							var echart_link_index = 0;
							
							for(var i = 0; i < r.wisArchivesPersons.length; i++) {
								var echart_data_category = 0;
								if(r.wisArchivesPersons[i].personFamilyHeader == r.wisArchivesPersons[i].personName) {
									echart_data_category = 1;
								}
								echart_data[i] = {
									name: r.wisArchivesPersons[i].personName,
									category: echart_data_category,
									draggable: true,

								};

								if(r.wisArchivesPersons[i].personFamilyHeader != r.wisArchivesPersons[i].personName) {
									echart_link[echart_link_index] = {
										source: r.wisArchivesPersons[i].personFamilyHeader,
										target: r.wisArchivesPersons[i].personName,
										value: r.wisArchivesPersons[i].personFamilyRelation
									};
									echart_link_index++;
								}
							}
							//绘制关系图谱
							fullecharts(echart_data, echart_link);
						} else {
							alert(r.msg);
						}
					}
				});
			}

			function fullecharts(echart_data, echart_link) {

				var echartDiv = document.getElementById('echart_div');
				//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
				var resizeWorldMapContainer = function() {
					echartDiv.style.width = window.innerWidth + 'px';
					echartDiv.style.height = window.innerHeight + 'px';
				};
				//设置容器高宽
				resizeWorldMapContainer();
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(echartDiv);

				// 配置关系图谱
				var option = {
					tooltip: {},
					animationDurationUpdate: 1500,
					animationEasingUpdate: 'quinticInOut',
					label: {
						normal: {
							show: true,
							textStyle: {
								fontSize: 18
							},
						}
					},
					series: [{
						type: 'graph',
						layout: 'force',
						symbolSize: 60,
						focusNodeAdjacency: true,
						roam: true,
						categories: [{
							name: '亲戚',
							itemStyle: {
								normal: {
									color: "#337ab7",
								}
							}
						}],
						label: {
							normal: {
								show: true,
								textStyle: {
									fontSize: 18
								},
							}
						},
						force: {
							repulsion: 2000
						},
						edgeLabel: {
							normal: {
								show: true,
								textStyle: {
									fontSize: 18
								},
								formatter: "{c}"
							}
						},
						data: echart_data,
						links: echart_link,
						lineStyle: {
							normal: {
								opacity: 0.7,
								width: 1,
								curveness: 0.1
							}
						}
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				//用于使chart自适应高度和宽度
				window.onresize = function() {
					//重置容器高宽
					resizeWorldMapContainer();
					myChart.resize();
				};

			}
		</script>
	</body>

</html>